<template>
	<view>
		<u-navbar :title="$t('my.address.addText')"  :autoBack="true" placeholder></u-navbar>
		<view class="content">
			<u--form :model="form" :errorType="errorType" ref="uForm" :rules="rules" labelWidth="80">
				<u-form-item :label="$t('my.address.consignee')" prop="name" borderBottom>
					<u-input v-model="form.name" border="none" placeholder="请输入收货人" />
				</u-form-item>
				<u-form-item :label="$t('my.address.mobile')" prop="mobile" borderBottom>
					<u-input v-model="form.mobile" border="none" placeholder="请输入手机号码" />
				</u-form-item>
				<u-form-item :label="$t('my.address.region')" prop="region" borderBottom @click="openData">
					<u-input v-model="form.region" disabledColor="#fff" disabled border="none" placeholder="请选择所在地区" />
				</u-form-item>
				<u-form-item :label="$t('my.address.address')" prop="address" borderBottom>
					<u-input v-model="form.address" border="none" placeholder="请输入详细地址" />
				</u-form-item>
			</u--form>
			<u-button :text="$t('my.address.addBtn')" shape="circle" :customStyle="btnStyle" @click="addition"></u-button>
			<!-- <simple-address ref="simpleAddress" cancelColor="#000"  :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#FFC100"></simple-address> -->
		</view>
	</view>
</template>

<script>
	// import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		data() {
			return {
				form: {
					name: "",
					mobile: "",
					region: "",
					address: ""
				},
				cityPickerValueDefault: [0, 0, 0],
				errorType: "toast",
				rules: {
					name: [{
						type: 'string',
						required: true,
						message: '请填写收货人',
						trigger: ['blur', 'change']
					}],
					mobile: [{
							required: true,
							message: '请输入手机号码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					region: [{
						type: 'string',
						required: true,
						message: '请选择所在地区',
						trigger: ['blur', 'change']
					}],
					address: [{
						type: 'string',
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					}]
				},
				btnStyle: {
					background: "#FFC100",
					color: "#231916",
					width: '80%',
					margin: "40px auto",
					border: "none",
					height: "90rpx"
				}
			};
		},
		// components: {
		//         simpleAddress
		//     },
		onLoad(e) {
			if (e.id) {
				uni.setNavigationBarTitle({
					title: "编辑地址"
				})
			} else {
				uni.setNavigationBarTitle({
					title: "添加地址"
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			openData() {
				this.$refs.simpleAddress.open();
			},
			// 添加地址
			addition() {
				this.$refs.uForm.validate().then(res => {}).catch(errors => {})
			},
			onConfirm(e){
				console.log(e)
				this.form.region=e.label
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff !important;
	}
</style>
<style lang="scss" scoped>
	/deep/.u-form-item__body__right{
		margin-left: 20rpx !important;
	}
	/deep/.u-form-item__body__left__content__label {
		font-weight: bold;
	}

	/deep/.u-form-item__body {
		padding: 40rpx 0 !important;
	}

	.content {
		padding: 20rpx 30rpx;
	}
</style>
